<template>
  <div class="border-one-background">
    <!-- 老旧改造小区 -->
    <div class="grid-item">
      <div class="title">
        <span>垃圾清运</span>
        <!-- <YearOrMonthSwitch class="yearOrMonth" :year="isThirdItemShowYear" /> -->
        <!-- <div class="yearSwitch">2019年</div> -->
        <year20andyear19 class="yearOrMonth" :year="isyear20" />
      </div>
      <!-- 四个信息框 -->
      <div class="third-message">
        <message
          :number="rubbishData.data.fill.value"
          :unit="rubbishData.data.fill.unit"
          :isSelect="selectedMessageDivByTime(1)"
        />
        <message
          :number="rubbishData.data.burn.value"
          :unit="rubbishData.data.burn.unit"
          :isSelect="selectedMessageDivByTime(2)"
        />
        <message
          :number="rubbishData.data.kitchen.value"
          :unit="rubbishData.data.kitchen.unit"
          :isSelect="selectedMessageDivByTime(3)"
        />
        <message
          :number="rubbishData.data.tempfill.value"
          :unit="rubbishData.data.tempfill.unit"
          :isSelect="selectedMessageDivByTime(0)"
        />
      </div>
      <!-- 图表 -->
      <ThirdEcharts class="third-echarts" :rdata="rubbishChartData.chartData" />
    </div>
  </div>
</template>

<script>
import message from "../../components/homePage/MessageDiv.vue";
import ThirdEcharts from "../../components/echart/left/ThirdEcharts";
// import YearOrMonthSwitch from "../../components/homePage/YearOrMonthSwitch";
import year20andyear19 from "../../components/homePage/year20andyear19";

export default {
  name: "bottomCenter",
  components: {
    message,
    ThirdEcharts,
    // YearOrMonthSwitch
    year20andyear19
  },
  data() {
    return {
      //是否显示2020年
      isyear20: true,
      //轮播计数器
      count: 1,
      // 保障房展示数据是否是年 标识符
      isThirdItemShowYear: true,
      url: "http://10.10.208.6:2020/home/serv",
      theBaseUrl: "http://10.10.208.6:30400/Statistics",
      // 垃圾清运数据
      rubbishData: {
        data: {
          fill: {
            value: "",
            unit: "填埋(吨)"
          },
          burn: {
            value: "",
            unit: "焚烧(吨)"
          },
          kitchen: {
            value: "",
            unit: "餐厨(吨)"
          },
          tempfill: {
            value: "",
            unit: "临时填埋(吨)"
          }
        }
      },
      // 垃圾清运数据
      rubbishChartData: {
        chartData: {
          xAxisData: [
            "市本级",
            "海宁市",
            "桐乡市",
            "喜善县",
            "平湖市",
            "海盐县"
          ],
          seriesData: [23]
        },
        year: {}
      }
    };
  },
  mounted() {
    this.getThemeRubbishYear();
  },
  methods: {
    // 垃圾清运接口
    getThemeRubbishYear() {
      let params = { path: "st", groupid: 15, year: 1, ismonth: 1 };
      this.http.post(this.url, params).then(res => {
        // ylsz_ljqy_cc: (6) [8.05, 3.65, 1.03, 1.15, 1.25, 0.85]
        // ylsz_ljqy_fs: (6) [32.46, 2.84, 9.92, 14.86, 12.33, 0]
        // ylsz_ljqy_lstm: (6) [0, 0.66, 0, 0, 0, 2.13]
        // ylsz_ljqy_qyl: (6) [40.51, 7.15, 10.96, 14.86, 12.33, 2.13]
        // ylsz_ljqy_tm: (6) [24.7, 6.57, 0, 1.69, 6.6, 5.18]
        let v = res.data;
        // 转换接口获取参数
        let rubbishData = this.rubbishData;
        let add_ylsz_ljqy_tm = this.arrAdd(v.ylsz_ljqy_tm); //总填埋垃圾
        let add_ylsz_ljqy_fs = this.arrAdd(v.ylsz_ljqy_fs); //总焚烧垃圾
        let add_ylsz_ljqy_cc = this.arrAdd(v.ylsz_ljqy_cc); //总餐厨垃圾
        let add_ylsz_ljqy_lstm = this.arrAdd(v.ylsz_ljqy_lstm); //总填埋垃圾
        let rubbishDataYear = {
          fill: {
            value: add_ylsz_ljqy_tm,
            unit: "填埋(吨)"
          },
          burn: {
            value: add_ylsz_ljqy_fs,
            unit: "焚烧(吨)"
          },
          kitchen: {
            value: add_ylsz_ljqy_cc,
            unit: "餐厨(吨)"
          },
          tempfill: {
            value: add_ylsz_ljqy_lstm,
            unit: "临时填埋(吨)"
          }
        };
        // 处理数据,若数据大于1万,进行缩放
        rubbishDataYear = this.scaleNumber(rubbishDataYear);
        rubbishData.data = rubbishDataYear;
        // 计算各个区的每年每月的垃圾总量

        let _this = this;
        setInterval(function() {
          _this.count += 1;
          let mod = _this.count % 4;
          let data = _this.rubbishChartData.chartData.seriesData;

          switch (mod) {
            case 0: {
              data = v.ylsz_ljqy_tm;
              break;
            }
            case 1: {
              data = v.ylsz_ljqy_fs;
              break;
            }
            case 2: {
              data = v.ylsz_ljqy_cc;
              break;
            }
            case 3: {
              data = v.ylsz_ljqy_lstm;
              break;
            }
          }
          _this.rubbishChartData.chartData.seriesData = data;
        }, 5 * 1000);
      });
    },
    // 垃圾清运 控制上方四个方框的选择
    selectedMessageDivByTime(data) {
      let count = this.count;
      let mod = count % 4;
      if (mod === data) {
        return true;
      } else {
        return false;
      }
    },
    // 垃圾清运 如果数据大于10000,进行数字转化
    scaleNumber(data) {
      let tag = ["fill", "burn", "kitchen", "tempfill"];
      tag.forEach(item => {
        let value = data[item].value;
        if (!value) {
          return;
        }
        if (value > 10 * 1000) {
          let unit = data[item].unit;
          data[item].value = (value / 10000).toFixed(2);
          data[item].unit = unit.replace("吨)", "万吨)");
        }
      });
      return data;
    },
    arrAdd(arr) {
      let nmb = 0;
      for (let i = 0; i < arr.length; i++) {
        nmb += Number(arr[i]);
      }
      return nmb;
    }
  }
};
</script>

<style lang="scss" scoped>
.border-one-background {
  background: url("../../assets/building/bottom/border-one.png");
  background-size: 99% 98.5%;
  background-repeat: no-repeat;
  margin-left: 0.5rem;
  //   width: 47.77rem;
  //   height: 24.77rem;
  .third-message {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    width: 95%;
    margin-top: 2rem;
    margin-left: 2.1rem;
  }
  .third-echarts {
    margin-top: 1rem;
  }
  .yearSwitch {
    width: 7rem;
    height: 2rem;
    background: rgba(216, 216, 216, 0);
    font-family: PingFangSC-Regular;
    position: absolute;
    font-size: 1.2rem;
    color: #ffffff;
    letter-spacing: 0;
    display: inline-block;
    right: 0rem;
  }
}
</style>